<template>
	<view class="box-bg" style="width: 100%;">
		<uni-nav-bar backgroundColor="#f5f5f5" shadow left-icon="left" :border='false' :shadow='false'
			@clickLeft="goBack" />
	</view>
	<view class="container">

		<view class="login-title">密码登录</view>
		<view class="phoneItem">
			<uni-easyinput :inputBorder="false" placeholder="请输入手机号"></uni-easyinput>
		</view>
		<view class="pwdItem">
			<uni-easyinput :inputBorder="false" placeholder="请输入密码"></uni-easyinput>
			<text class="forgot-password" @click="navigateToForgotPassword">忘记密码?</text>
		</view>
		<button class="login-btn" @click="goHome">登录</button>
		<view class="other-login">
			<text>其他登录方式</text>
			<view class="anotherLogin">
				<i class="iconfont shouji" @click="goLogin"></i>
				<i class="iconfont weixin1" @click="goWeixin"></i>
			</view>

		</view>
		<view class="agreement">
			<checkbox />
			<text>我已阅读并同意</text>
			<navigator url="/pages/agreement">《服务协议》</navigator>
			<text>和</text>
			<navigator url="/pages/privacy">《个人信息保护指引》</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	function goLogin() {
		uni.navigateTo({
			url: '/pagesA/login/login'
		})
	}

	function goWeixin() {
		uni.navigateTo({
			url: '/pagesA/login/weixin'
		})
	}

	function goHome() {
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style scoped>
	@import '@/static/icon.css';

	.container {
		padding: 20px;
	}

	.login-title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.phoneItem,
	.pwdItem {
		margin-bottom: 15px;
		display: flex;
		border-bottom: 1px solid #eee;
	}



	.forgot-password {

		font-size: 14px;
		float: right;
	}

	.login-btn {
		width: 100%;
		background: linear-gradient(90deg, rgba(52, 120, 246, 1) 0%, rgba(2, 167, 240, 1) 99%);
		color: #fff;
		border: none;
		border-radius: 5px;
		margin-top: 50px;
	}

	.other-login {
		margin-top: 20px;
		text-align: center;
	}

	.login-method {
		display: flex;
		justify-content: center;
		margin-top: 10px;
	}

	.method-btn {
		padding: 10px;
		background-color: #fff;
		color: #007aff;
		border: 1px solid #007aff;
		border-radius: 5px;
		margin: 0 5px;
	}

	.agreement {
		display: flex;
		align-items: center;
		margin-top: 20px;
	}

	.agreement text {
		margin-right: 5px;
	}

	.agreement navigator {
		margin-right: 5px;
		color: #007aff;
	}

	.iconfont {
		padding: 10px;
		border-radius: 50%;
		color: white;
		margin-left: 15px;
		font-size: 50rpx
	}


	.shouji {
		background: #A23FFF;
	}

	.weixin1 {
		background: #3ED280;
	}

	.anotherLogin {
		margin-left: 10%;
		width: 80%;
		height: 50px;
		margin-top: 200px;
	}
</style>